<script>
import {ref, defineComponent} from "vue";
import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
import {postWireRec,postNumberRec} from "@/request/api/model.js";

export default defineComponent({
  name:'Identify',
  props: {
    title: {
      type: String,
      required: true
    },
    upUrl: {
      type: String,
      required: true
    }
  },
  components: {
    ArchiveIcon
  },
  setup(){
    const showModalRef = ref(false);
    const previewImageUrlRef = ref("");
    function handlePreview(file) {
      console.log(file)
      const { name } = file;
      console.log(name)
      previewImageUrlRef.value = "http://127.0.0.1:9090/"+name;
      showModalRef.value = true;
    }
    let previewFileList= [

    ]
    return {
      handlePreview,
      showModal: showModalRef,
      previewImageUrl: ref(previewImageUrlRef),
      previewFileList: ref(previewFileList)
    }
  }
})
</script>

<template>
  <h1>{{title}}</h1>
  <h2>请选择图片上传（支持同时上传多张图片）</h2>


    <n-flex justify="center" >
      <n-upload
          :action="upUrl"
          :default-file-list="previewFileList"
          list-type="image-card"
          :max=1
          @preview="handlePreview"
      />
      <n-modal
          v-model:show="showModal"
          preset="card"
          style="width: 600px"
          title="一张很酷的图片"
      >
        <img :src="previewImageUrl" alt="..." style="width: 100%">
      </n-modal>
    </n-flex>

  <n-button size="large" strong type="info">模型调用</n-button>

</template>

<style lang="scss" scoped>
  h1{
    text-align: center;
    color: #ffffffee;
    font-weight: bold;
    font-size: 56px;
    padding-bottom: 0;
    margin: 0;
  }
  h2{
    padding-top: 0;
    font-size: 16px;
    font-weight: bold;
    color: #13547abb;
    text-align: center;
    margin: 0;
  }
  .upload{
    position: relative;
    margin: 0 auto;
    width: 100%;
  }
  .idf-file-up{
    position: relative;
    width: 100%;
    height: 7rem;
    display: flex;
    justify-items: center;
    align-items: center;
    .label-main{
      position: relative;
      border-radius: 20rem;
      width: 70rem;
      height: 3.6rem;
      input[type='file']{
        display: none;
      }
      label{
        position: absolute;
        width: 90%;
        height: 3.6rem;
        background: #fff;
        border-radius: 20rem;
        .ellipsis{
          position: absolute;
          margin: 0;
          width: 100%;
          overflow: hidden;
          z-index: 10;
          left: 1rem;
          top: 0;
          line-height: 3.6rem;
        }
      }
      .inp-sub{
        position: absolute;
        z-index: 9;
        width: 5.6rem;
        height: 3.6rem;
        right: 1%;
        border: 0;
        background: #ffffff;
        border-radius: 10px;
        font-size: 18px;
        color: #1a3f5b;
        transform-origin: left;
        transition: 0.5s 0s ease all;
        &:hover{
          color: #f2f2f2;
          background: #1a3f5b;
          transform-origin: left;
          border-radius: 10px;
          transition: 0.5s 0s ease all;
        }
      }
      .inline-block{

      }
    }
  }
  .idf-res-main{
    position: relative;
    text-align: center;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .irm-left{
      position: relative;
      width: 80%;
      height: 100%;
      background: #fff;
      border-radius: 15px;
      text-align: center;
      h5{
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 1rem;
      }
    }
    .irm-right{
      position: relative;
      z-index: 1;
      text-align: left;
      width: 42rem;
      height: 80%;
      border-radius: 15px;
      background: url("/src/assets/images/system/businesswoman-using-tablet-analysis.jpg") center center;
      background-size: 100% 100%;
      .irm-mask{
        position: relative;
        z-index: 9;
        width: 100%;
        height: 100%;
        padding: 2rem;
        border-radius: 15px;
        background: repeating-linear-gradient(to right top,#41889aee,#80d0c777);
        h5{
          font-size: 26px;
          font-weight: bold;
        }
      }
    }
  }

  .irm-image-box{
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
</style>